import { defineConfig, presetAttributify, presetIcons, transformerDirectives, transformerVariantGroup } from 'unocss';
import { unoTheme } from './src/theme';
// @docs https://github.com/unocss-applet/unocss-applet/tree/main
/** 在小程序(UniApp 和 Taro)中使用UnoCSS，兼容不支持的语法 */
import { presetApplet, presetRemRpx, transformerAttributify } from 'unocss-applet';

// @docs https://unocss.dev/presets/legacy-compat
import { presetLegacyCompat } from '@unocss/preset-legacy-compat';

const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false;
const transformers = [];
const presets = [];
if (isApplet) {
  // 解决第三方样式冲突问题
  transformers.push(transformerAttributify({ prefixedOnly: true, prefix: 'sn' }));
} else {
  presets.push(presetRemRpx({ mode: 'rpx2rem' }));
}

presets.push(presetApplet());
presets.push(presetAttributify());

export default defineConfig({
  presets: [
    ...presets,
    // 配置图标
    presetIcons({
      scale: 1.2,
      warn: true,
      prefix: 'byt-',
      autoInstall: true,
      extraProperties: {
        display: 'inline-block',
        'vertical-align': 'middle'
      }
    }),

    // 兼容app端颜色值
    presetLegacyCompat({
      commaStyleColorFunction: true
    })
  ],
  /**
   * 自定义快捷语句
   * @docs https://unocss.dev/config/shortcuts
   */
  shortcuts: [
    {
      'wh-full': 'w-full h-full',
      'flex-center': 'flex justify-center items-center',
      'flex-col-center': 'flex-center flex-col',
      'flex-x-center': 'flex justify-center',
      'flex-y-center': 'flex items-center',
      'i-flex-center': 'inline-flex justify-center items-center',
      'i-flex-x-center': 'inline-flex justify-center',
      'i-flex-y-center': 'inline-flex items-center',
      'flex-col': 'flex flex-col',
      'flex-col-stretch': 'flex-col items-stretch',
      'i-flex-col': 'inline-flex flex-col',
      'i-flex-col-stretch': 'i-flex-col items-stretch',
      'flex-1-hidden': 'flex-1 overflow-hidden',
      'absolute-lt': 'absolute left-0 top-0',
      'absolute-lb': 'absolute left-0 bottom-0',
      'absolute-rt': 'absolute right-0 top-0',
      'absolute-rb': 'absolute right-0 bottom-0',
      'absolute-tl': 'absolute-lt',
      'absolute-tr': 'absolute-rt',
      'absolute-bl': 'absolute-lb',
      'absolute-br': 'absolute-rb',
      'absolute-center': 'absolute-lt flex-center wh-full',
      'fixed-lt': 'fixed left-0 top-0',
      'fixed-lb': 'fixed left-0 bottom-0',
      'fixed-rt': 'fixed right-0 top-0',
      'fixed-rb': 'fixed right-0 bottom-0',
      'fixed-tl': 'fixed-lt',
      'fixed-tr': 'fixed-rt',
      'fixed-bl': 'fixed-lb',
      'fixed-br': 'fixed-rb',
      'fixed-center': 'fixed-lt flex-center wh-full',
      'nowrap-hidden': 'whitespace-nowrap overflow-hidden',
      'ellipsis-text': 'nowrap-hidden text-ellipsis',
      'transition-base': 'transition-all duration-300 ease-in-out'
    }
  ],
  theme: {
    colors: {
      ...unoTheme
    }
  },
  transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
  rules: [
    [
      'p-safe',
      {
        padding:
          'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)'
      }
    ],
    ['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }]
  ]
});
